﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-content">
        <single_table :api="`${path}/getdata`" :pagination="true" :border="true" row-key="Id" :search-columns="searchColumns" ref="tableRef" :cell-class-name="editClass">
            <template #header-left="scope">@(Html.Raw(ViewBag.PageFuncs("tools")))</template>
            <template #default>
                <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>

                @* 在此处添加表的列代码 *@
                <single_table_editor prop="Prop1" label="字段1" width="200" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.Prop1">
                            <el-option value="1" label="选项1"></el-option>
                            <el-option:value ="2" label="选项2"></el-option>
                        </el-select>
                    </template>
                    <template #text="scope">表格列的非编辑状态下插槽，不使用责默认显示字段值</template>
                </single_table_editor>
                <single_table_editor prop="Prop2" label="字段2" width="100" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.Prop2"></el-input>
                    </template>
                </single_table_editor>
                @* 在此处添加表的列代码 *@

                <single_table_operation count="@(ViewBag.PageFuncs("table:count"))">
                    <template #default="scope">@(Html.Raw(ViewBag.PageFuncs("table")))</template>
                </single_table_operation>
            </template>
        </single_table>
        <component is="@(ViewBag.GetCompName("form"))" ref="formRef" v-on:refresh="refresh"></component>
    </div>
</template>
@await Html.PartialAsync("Form")
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                searchColumns: [
                    {
                        title: "字段1", prop: "prop1", type: "select", auto: true,
                        enums: [
                            { value: "1", label: "选项1" },
                            { value: "2", label: "选项2" }
                        ]
                    },
                    { title: "字段2", prop: "prop2", placeholder: "输入字段2查询查询" }
                ]
            }
        },
        components: { @(ViewBag.GetCompName("form")) },
        methods: {
            init(){
                var that = this;
            },
            refresh(){
                this.$refs.tableRef.loadData();
            },
            form(title){
                this.$refs.formRef.open(title);
            },
            editRow(row){
                row.isEdit = true;
            },
            saveRow(row){
                if (app.func.tableRowEditVerify(row, this.$refs.formRef.rules)) {
                    app.func.submit(`${this.path}/save`, row, result => { row.isEdit = false; });
                }
            },
            editClass(scope){
                return app.func.tableRowEditCellVerify(scope, this.$refs.formRef.rules) ? null : "edit_row_error";
            },
            del(ids){
                app.func.delete(`${this.path}/delete`, ids, this.refresh);
            }
        },
        mounted() { this.init(); }
    };
</script>